<template>
  <div>
    <el-card class="box-card-2">
      <el-row >
        <el-col :span="2" >
          <el-image
              style="width: 53px; height: 53px"
              :src="user.avatar"
              :fit="'cover'">
          </el-image>
        </el-col>
        <el-col :span="22" class="body-comment">
          <el-input :rows="4" type="textarea" v-model="user.text"></el-input>
        </el-col>
      </el-row>



      <el-row class="body-comment-title"><span>全部评论</span><span>{{comment.comments}}</span></el-row>
      <el-row class="body-comment-content" v-for="(c,index) in comment.content">
        <el-row>
          <el-col :span="2">
            <el-image
                class="media-img"
                style="width: 48px; height: 48px"
                :src="c.avatar"
                :fit="'cover'">
            </el-image>
          </el-col>
          <el-col :span="20" class="body-comment-content-text">
            <el-row class="body-comment-content-text-title">{{c.auth}}</el-row>
            <el-row class="body-comment-content-text-status">{{c.floor}}楼&nbsp;{{c.time}}</el-row>
            <el-row>{{c.content}}</el-row>
            <el-row class="body-comment-content-text-likes">
              <a href="javascript:void(0)" @click="likeIt(c,index)" :ref="'comment'+index+'Ref'">
                <i class="el-icon-caret-top"></i>
                赞{{c.likes}}
              </a>
              <span>回复</span>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="(index+1) !== comment.content.length">
          <el-divider/>
        </el-row>


      </el-row>



    </el-card>
  </div>
</template>

<script>
  export default {
    name: "CommentArea",
    data() {
      return {
        user: {
          avatar: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/avatars/7bfdd41d-7cc5-4bc0-a922-2e0180391320.png',
          text: '',
        },
        comment: {
          comments: 2,
          content: [
            {
              auth: '一Zhi优雅的猪',
              time: '2019.12.15 13:37',
              floor: 1,
              content: '这也太简单了吧',
              likes: 1,
              avatar: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/avatars/15-a7ac401939dd4df837e3bbf82abaa2a8.jpg',
              isLiked: false,
            },
            {
              auth: 'markfrain',
              time: '2019.12.15 13:37',
              floor: 1,
              content: '多host怎么切？',
              likes: 1,
              avatar: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/avatars/5a90104098b1.jpg',
              isLiked: false,
            }
          ],


        },

      }
    },
    methods: {
      likeIt(c,index) {
        let ref = 'comment'+index+'Ref';

        if (!c.isLiked) {
          this.$refs[ref][0].style.color = '#ec7259';
          c.isLiked = true;
          c.likes ++;
        }else {
          c.isLiked = false;
          c.likes--;
          this.$refs[ref][0].style.color = '';
        }
      },
    },
    mounted() {
    }
  }
</script>

<style scoped lang="less">


  .el-image {
    border: #969696 1px solid;
    border-radius: 50%;
  }
  .el-card{
    margin-top: 20px;
    padding-bottom: 50px;
  }

  .body-comment{
    margin-left: 15px;
    width: 85%;
  }

  .body-comment-title {
    margin: 20px 0;
    border-left: #ec6e56 5px solid;
    padding-left: 10px;

    span {
      margin-right: 10px;
    }
  }

  .body-comment-content {
    .el-divider {
      margin-left: 15px;
      width: 95%;
    }
  }

  .body-comment-content-text {
    margin-left: 15px;
  }

  .body-comment-content-text-status {
    font-size: 12px;
    color: #a7a7a7;
  }

  .body-comment-content-text-likes{
    margin-top: 10px;
    color: #969696;
    a {
      margin-right: 10px;
      text-decoration:none;
      color: #969696;
    }
  }
</style>